import Taro,{ Component } from "@tarojs/taro";
import { ScrollView,View,Image,Text } from "@tarojs/components";
import { AtSegmentedControl,AtActivityIndicator,AtDivider } from "taro-ui";
import './index.scss';

interface itemList {
  img:string,  //封面图
  tCn:string,  //标题
  commonSpecial:string, //简介
  cC:number, //影院
  NearestShowtimeCount:string, //上映场次
  id:number,  //key
  isDMAX:boolean, //是否3DMax
  is3D:boolean, //是否3D
  isHot:boolean, //是否最热
  movieId:number,  //电影id
  //cc+NearestShowtimeCount  =  105家影院上映728场;
}

//统一返回数据对象
interface comingReturn {
  result:string,
  requestID:string,
  errMsg:string,
}
//最受关注
interface greatestConcern{
  id:number,  //主键id
  actor1:string,  //演员1
  actor2:string,  //演员2
  director:string,  //导演
  image:string,  //封面图
  title:string,  //标题
  type:string,  //类型
  rDay:number,  //日
  rMonth:number,  //月
  wantedCount:number,  //多少人想看
}
export default class GitHub extends Component {
  state = {
    windowHeight:100,
    current:0,
    Content:[],
    // eslint-disable-next-line react/no-unused-state
    status:'more',
    locationId:'290',
    attentionValue:[],  //最受关注
    moviecomings:[],  //即将上映
  }
  onScrolltoupper = (event)=>{
    console.log(event,'滚动到顶部了');
  }
  onScrollToLower = (event)=>{
    console.log(event,'滚动到底部了');
  }
  onScroll = ()=>{
    // console.log(event.detail);
  }
  componentWillMount(): void {
    let _this = this;
    Taro.getSystemInfo({
      success(res){
        _this.setState({
          windowHeight:res.windowHeight
        })
      }
    })
    this._getData();
  }
  handleClick (value) {
    if(value === 1){
      this.comingSoon();
    }
    this.setState({
      current: value
    })
  }
  _getData = ()=>{
    let locationId = this.state.locationId;
    Taro.cloud
      .callFunction(
      {
        name:'https',
        data:{
          url:'http://m.mtime.cn/Service/callback.mi/Showtime/LocationMovies.api?locationId='+locationId,
        }
      }
    ).then((res:comingReturn)=>{
      let result = JSON.parse(res.result);
      this.setState({
        Content:result.ms,
      })
    })
  }
  NavigatorTo = (movieId)=>{
    let locationId = this.state.locationId;
    Taro.navigateTo({
      url:'/pages/moveDetails/index?locationId='+locationId+'&movieId='+movieId,
    });
  }
  //获取即将上映列表
  comingSoon = ()=>{
    let locationId = this.state.locationId;
    Taro.cloud.callFunction({
      name:'https',
      data:{
        url:'http://m.mtime.cn/Service/callback.mi/Movie/MovieComingNew.api?locationId='+locationId
      }
    }).then((res:comingReturn)=>{
      let value = JSON.parse(res.result);
      let attention = value.attention;
      let moviecomings = value.moviecomings;
      console.log(value,'列表展示');
      this.setState({
        // eslint-disable-next-line react/no-unused-state
        attentionValue:attention,  //最受关注的
        // eslint-disable-next-line react/no-unused-state
        moviecomings:moviecomings,  //即将上映
      })
    })
  }
  render(){
    let itemValue:JSX.Element [] | JSX.Element;
    let comingSoonValue:JSX.Element [] | JSX.Element;
    let moviecomingsEle:JSX.Element [] | JSX.Element;
    const Content = this.state.Content;
    const currentStatus = this.state.current;
    let height = this.state.windowHeight - 114;
    const attentionValue = this.state.attentionValue;  //最受欢迎
    const moviecomingsValue = this.state.moviecomings;  //即将上映
    let scrollStyle = {
      height: height + "px",
      padding:18,
      position:'relative',
    }
    const scrollTop = 0;
    const Threshold = 50
    if(Content&&moviecomingsValue&&attentionValue){
      //正在热映
      itemValue = Content.map((item:itemList)=>{
        return (
            <View onClick={()=>{this.NavigatorTo(item.movieId)}} key={item.id} className='at-row Container'>
              <View className='at-col at-col-4'>
                <Image  className='Image' src={item.img}  />
              </View>
              <View className='at-col at-col-8'>
                <Text className='TextTitle'>{item.tCn}</Text>
                <Text className='TextcommonSpecial'>{item.commonSpecial}</Text>
                <View>
                  {
                    item.is3D?
                      <Text className='TextStyle'>3D</Text>
                      :''
                  }
                  {
                    item.isDMAX?
                      <Text className='TextStyle'>中国巨幕</Text>
                      :''
                  }
                </View>
                <Text className='Textbottom'>{item.cC}家影院上映{item.NearestShowtimeCount}场</Text>
              </View>
            </View>
        )
      })
      //最受关注
      comingSoonValue = attentionValue.map((item:greatestConcern,index:number)=> {
        return (
          <View onClick={()=>{this.NavigatorTo(item.id)}} key={index}>
            <View className='at-row topTimeBorder'>
              <Text className='titleBottomTime'>{item.rMonth}月{item.rDay}日</Text>
              <View className='at-col-4'>
                <Image className='Image' src={item.image}></Image>
              </View>
              <View className='at-col-8'>
                <Text className='RightTitle'>{item.title}</Text>
                <Text className='RightWanna'>{item.wantedCount}</Text>
                <Text>人想看 - </Text>
                <Text>{item.type}</Text>
                <Text style={{display:"block",marginTop:'10px',marginBottom:'10px'}}>导演: {item.director}</Text>
                <Text>演员: {item.actor1},{item.actor2}</Text>
              </View>
              {/*{basicResult}*/}
            </View>
          </View>
        )
      })
      //即将上映
      moviecomingsEle = moviecomingsValue.map((item:greatestConcern,index:number)=> {
        return (
          <View onClick={()=>{this.NavigatorTo(item.id)}} key={index}>
            <View className='at-row topTimeBorder'>
              <Text className='titleBottomTime'>{item.rMonth}月{item.rDay}日</Text>
              <View className='at-col-4'>
                <Image className='Image' src={item.image}></Image>
              </View>
              <View className='at-col-8'>
                <Text className='RightTitle'>{item.title}</Text>
                <Text className='RightWanna'>{item.wantedCount}</Text>
                <Text>人想看 - </Text>
                <Text>{item.type}</Text>
                <Text style={{display:"block",marginTop:'10px',marginBottom:'10px'}}>导演: {item.director}</Text>
                <Text>演员: {item.actor1},{item.actor2}</Text>
              </View>
              {/*{basicResult}*/}
            </View>
          </View>
        )
      })
    }
    return (
      <View>
        <AtSegmentedControl
          values={['正在热映', '即将上映']}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        <ScrollView
          // className='scrollview'
          scrollY
          scrollWithAnimation
          scrollTop={scrollTop}
          style={scrollStyle}
          onScrollToLower={this.onScrollToLower}
          lowerThreshold={Threshold}
          upperThreshold={Threshold}
          onScrolltoupper={this.onScrolltoupper}
          onScroll={this.onScroll}>
          {
            currentStatus?
              <View className='BottomView'>
                {
                  attentionValue.length>0?
                  <View>
                    <View className='at-row'>
                      <Text className='titleTop'>最受关注</Text>
                      <Text className='titleTopRight'>（{attentionValue.length}部）</Text>
                    </View>
                    {comingSoonValue}
                    <View className='at-row'>
                      <Text className='titleTop'>即将上映</Text>
                      <Text className='titleTopRight'>（{moviecomingsValue.length}部）</Text>
                    </View>
                    {moviecomingsEle}
                  </View>:''
                }
              </View>
              :itemValue
          }
          {
            this.state.current===0?Content.length>0?
              null:
              <AtActivityIndicator mode='center' content='加载中'></AtActivityIndicator>:
              Content.length>0&&moviecomingsValue.length>0?
                null:
                <AtActivityIndicator mode='center' content='加载中'></AtActivityIndicator>
          }
          {
            this.state.current===0?Content.length>0?
              <View className='AtDividerComponent'>
                <AtDivider content='没有更多了' fontColor='#2d8cf0' lineColor='#2d8cf0' />
              </View>:null:
              Content.length>0&&moviecomingsValue.length>0?
                <View className='AtDividerComponent'>
                  <AtDivider content='没有更多了' fontColor='#2d8cf0' lineColor='#2d8cf0' />
                </View>:null
          }
        </ScrollView>
      </View>
    )
  }
}
